  
<script lang="ts" setup>
import {ref} from 'vue';
const prop = defineProps<{
  title?: string
  lefeButton?:  string
  rightButton?:  string
  show: boolean
}>()

const s = ref()

const emit = defineEmits(["onComplate","onClose"])
const complate = ()=>{
  emit("onComplate")
}
const close = ()=>{
  emit("onClose");
}
</script>

<template>
  <el-dialog 
  :model-value="show" 
  :title="title" 
  align-center 
  style="text-align: center"
  :before-close="close"
  >
    <div id="coverSlot">
      <slot ></slot>
    </div>
    <el-button v-if="lefeButton" type="primary" @click="complate">{{lefeButton}}</el-button>
    <el-button v-if="rightButton" type="danger" @click="close">{{rightButton}}</el-button>
  </el-dialog>
</template>

<style scoped>
    #coverSlot {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between;
      align-content: space-around;
    }
</style>
